<template>
	<view style="display: flex;flex-direction: column;background-color: #FFFFFF;">
		<view class="top-group-view flex-caj">
			<view style="display: flex;flex-direction: row;margin-top: 40rpx;margin-bottom: 50rpx;">
				<image :src="orderDetailInfo.cover" class="goods-img" mode="aspectFill"></image>
				<view style="display: flex;flex-direction: column;height: 188rpx;flex: 1;">
					<text class="goods-title">{{orderDetailInfo.title}}</text>
					<view style="flex: 1;"></view>
					<text class="goods-store">店铺：{{orderDetailInfo.shopName}}</text>
				</view>
			</view>
			<!-- <view class="flex-raj">
				<view class="line-view-white"></view>
				<text class="sub-title">总业绩</text>
				<view class="line-view-white"></view>
			</view>
			<view class="achieve-group">
				<view style="flex: 1;margin-left: 40rpx;">
					<view style="display: flex;flex-direction: row;">
						<view class="flex-caj">
							<text style="font-size: 24rpx;color: #DFD6FB;">总销售额</text>
							<text style="font-size: 28rpx;color: #FFFFFF;margin-top: 16rpx;">￥{{orderDetailInfo.productTotalPayAmount}}</text>
						</view>
						<view style="flex: 1;"></view>
					</view>
				</view>
				<view class="flex-caj">
					<text style="font-size: 24rpx;color: #DFD6FB;">总佣金</text>
					<text style="font-size: 28rpx;color: #FFFFFF;margin-top: 16rpx;">￥{{orderDetailInfo.productTotalKolCosFee}}</text>
				</view>
				<view style="flex: 1;margin-right: 40rpx;">
					<view style="display: flex;flex-direction: row;">
						<view style="flex: 1;"></view>
						<view class="flex-caj">
							<text style="font-size: 24rpx;color: #DFD6FB;">总订单</text>
							<text style="font-size: 28rpx;color: #FFFFFF;margin-top: 16rpx;">{{orderDetailInfo.productOrderNum}}</text>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view style="display: flex;height: 80rpx;">
			<view class="flex-raj" style="flex: 1;" @click="showSelectorDialog('dateType')">
				<text style="color: #999999;font-size: 24rpx;">{{currentDateTypeInfo.label}}</text>
				<image src="../static/ic_arrow_bottom.png" class="img-arrow"></image>
			</view>
			<view class="flex-raj" style="flex: 1;" @click="showSelectorDialog('dayType')">
				<text style="color: #999999;font-size: 24rpx;">{{currentDayTypeInfo.label}}</text>
				<image src="../static/ic_arrow_bottom.png" class="img-arrow"></image>
			</view>
			<view class="flex-raj" style="flex: 1;" @click="chooseAccount">
				<text style="color: #999999;font-size: 24rpx;">{{accountInfo.nickName}}</text>
				<image src="../static/ic_arrow_bottom.png" class="img-arrow"></image>
			</view>
			<view class="flex-raj" style="flex: 1;" @click="showSelectorDialog('timeType')" v-if="currentDayTypeInfo.value == '5' || currentDayTypeInfo.value == '4'">
				<text style="color: #999999;font-size: 24rpx;">{{currentTimeTypeInfo.label}}</text>
				<image src="../static/ic_arrow_bottom.png" class="img-arrow"></image>
			</view>
		</view>
		<view class="line-view"></view>
		<view style="margin-top: 40rpx;display: flex;align-items: center;">
			<view class="left-vertical-view"></view>
			<text style="font-size: 24rpx;color: #333333;">汇总数据</text>
		</view>
		<view class="order-stat-group">
			<uni-home-card :statInfo="statInfo" titleColor="#666666" textColor="#333333"></uni-home-card>
		</view>
		<view class="line-view"></view>
		<view style="margin-top: 26rpx;display: flex;align-items: center;">
			<view class="left-vertical-view"></view>
			<text style="font-size: 24rpx;color: #333333;">趋势图表</text>
		</view>
		<text style="font-size: 24rpx;color: #333333;margin-left: 50rpx;margin-top: 36rpx;">数量</text>
		<view style="margin: 0rpx 0rpx 20rpx 32rpx;">
			<uni-line-chart ref="lineChartRef"></uni-line-chart>
		</view>
		<view class="flex-raj" style="flex: 1;height: 32rpx;margin-bottom: 28rpx;" @click="showSelectorDialog('chatType')">
			<text style="color: #999999;font-size: 24rpx;">{{chatTargetType.label}}</text>
			<image src="../static/ic_arrow_bottom.png" class="img-arrow"></image>
		</view>
		<view class="line-view"></view>
		<view style="margin-top: 26rpx;display: flex;align-items: center;">
			<view class="left-vertical-view"></view>
			<text style="font-size: 24rpx;color: #333333;">时段明细</text>
			<view style="margin-left: 4rpx;padding: 10rpx;" @click="showTargetDialog('timeType')">
				<image src="../static/img_product_set.png" style="width: 24rpx;height: 24rpx;"></image>
			</view>
		</view>
		<wyb-table ref="timeTable" :headers="timeHeaders" :contents="timeContents" :sortCol="sortCol" />
		<view class="no-more-view" v-if="timeContents.length>0">没有更多了</view>
		<view class="bind-account-view" v-else>
			<text style="padding: 10rpx;" @click="bindAccountClick">暂无数据，绑定抖音号可查看</text>
		</view>
		<view style="display: flex;align-items: center;">
			<view class="left-vertical-view"></view>
			<text style="font-size: 24rpx;color: #333333;">账号排行</text>
			<view style="margin-left: 4rpx;padding: 10rpx;" @click="showTargetDialog('userType')">
				<image src="../static/img_product_set.png" style="width: 24rpx;height: 24rpx;"></image>
			</view>
		</view>
		<wyb-table ref="table" :headers="userHeaders" :contents="userContents" :sortCol="sortCol" hasAvatarFirst="true" />
		<view class="no-more-view" v-if="userContents.length>0">没有更多了</view>
		<view class="bind-account-view" v-else>
			<text style="padding: 10rpx;" @click="bindAccountClick">暂无数据，绑定抖音号可查看</text>
		</view>
		<view style="height: 30rpx;"></view>	
		<uni-popup ref="showTargetPop" type="bottom">
			<view class="pop-content">
				<view class="pop-head-view">
					<text class="pop-btn-view" @click="onCancelPopClick">取消</text>
					<view class="flex-caj" style="flex:1">
						<text style="font-size: 24rpx;color: #666666;">更多指标</text>
						<text style="font-size: 18rpx;color: #999999;">最少选一项</text>
					</view>
					<text class="pop-btn-view" style="color: #9574F3;"  @click="onConfirmPopClick">确定</text>
				</view>
				<view style="background-color: white;display: flex;flex-direction: column;">
					<view class="line-view"></view>
					<view style="font-size: 20rpx;color: #000;margin: 20rpx 20rpx;">订单数据</view>
					<view style="margin: 0rpx 0rpx 52rpx 20rpx;">
						<view v-for="(item, index) in allTargetTypeList" :key="index" :id="index" @click="onItemPopClick(index)">
							<view style="width: 25%;float:left;">
								<view class="pop-item-label" >
									<text :style="item.isCheck?'color:#9574F3':'color:#999999'">{{item.label}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<w-picker
		    mode="selector"
		    :value="currentDateTypeInfo.label"
		    :options="dateTypeList"
		    @confirm="onConfirm($event,'dateType')"
		    ref="dateType" ></w-picker>
		<w-picker
		    mode="selector"
		    :value="currentDayTypeInfo.label"
		    :options="dayTypeList"
		    @confirm="onConfirm($event,'dayType')"
		    ref="dayType" ></w-picker>	
		<w-picker
		    mode="selector"
		    :value="currentTimeTypeInfo.label"
		    :options="timeTypeList"
		    @confirm="onConfirm($event,'timeType')"
		    ref="timeType" ></w-picker>
		<w-picker
		    mode="selector"
		    :value="chatTargetType.label"
			:default-props="defaultProps"
		    :options="allTargetTypeList"
		    @confirm="onConfirm($event,'chatType')"
		    ref="chatType" ></w-picker>
	</view>
</template>

<script>
	import uniHomeCard from '@/components/uni-home/uni-home-card.vue';
	import uniLineChart from '@/components/uni-home/uni-line-chart.vue';
	import wybTable from '@/components/wyb-table/wyb-table.vue';
	import wPicker from "@/components/w-picker/w-picker.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import configUrls from '../../common/config.js';
	export default {
		components: {
			uniHomeCard,
			uniLineChart,
			wybTable,
			wPicker,
			uniPopup
		},
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				goodsId: "",
				orderId: "",
				accountInfo: {nickName: "账号名称", displayId: ""},
				currentDayTypeInfo: {label: "今天", value: "5"},
				//2-近7日，3-近30日,4-昨日，5-今天,6-本月，7-上月，下拉数据写死即可
				dayTypeList: [{label: "今天", value: "5"},{label: "昨日", value: "4"},
							{label: "近7日", value: "2"},{label: "近30日", value: "3"},
							{label: "本月", value: "6"},{label: "上月", value: "7"}],
				dayTypeListGroup: [{label: "今天", value: "5"},{label: "昨日", value: "4"},
							{label: "近7日", value: "2"},{label: "近30日", value: "3"},
							{label: "本月", value: "6"},{label: "上月", value: "7"}],			
				currentDateTypeInfo: {label: "付款时间", value: "1"},
				//1=支付时间，2=结算时间，下拉数据写死即可
				dateTypeList: [{label: "付款时间", value: "1"},{label: "结算时间", value: "2"}],
				currentTimeTypeInfo: {label: "1小时", value: "2"},
				//1=30分钟，2=1小时，3=2小时，下拉数据写死即可
				timeTypeList: [{label: "30分钟", value: "1"},{label: "1小时", value: "2"},{label: "2小时", value: "3"}],
				statInfo: {
							totalPayAmount: 0.00,
							orderCount: 0,
							estimatedCommission: 0.00,
							validPayAmount: 0.00,
							validOrderCount: 0,
							validEstimatedCommission: 0.00,
							refundPayAmount: 0.00,
							refundOrderCount: 0,
							refundEstimatedCommission: 0.00,
							refundRatio: 0,
				},
				xDataList: [],
				yDataList: [],
				chatTargetType: {label: '销售总额',key: 'totalPayAmount'},
				defaultProps: {label:'label','value':'key'},
				allTargetTypeList: [
							{label: '销售总额',key: 'totalPayAmount', isCheck: false},
							{label: '有效销售额',key: 'validPayAmount', isCheck: false},
							{label: '退款销售额',key: 'refundPayAmount', isCheck: false},
							{label: '佣金总额   ',key: 'estimatedCommission', isCheck: false},
							{label: '有效佣金',key: 'validEstimatedCommission', isCheck: false},
							{label: '退款佣金',key: 'refundEstimatedCommission', isCheck: false}, 
							{label: '订单总数',key: 'orderCount', isCheck: false}, 
							{label: '有效订单数',key: 'validOrderCount', isCheck: false},
							{label: '退款订单数',key: 'refundOrderCount', isCheck: false},
							{label: '退款率',key: 'refundRatio', isCheck: false},
				],
				timeHeaders: [
							{label: '时间',key: 'time', width: 200}, 
							{label: '销售总额',key: 'totalPayAmount'}, 
							{label: '佣金总额',key: 'estimatedCommission'}, 
							{label: '有效佣金',key: 'validEstimatedCommission'}, 
							{label: '订单总数',key: 'orderCount'},
							{label: '有效订单数',key: 'validOrderCount'},
							{label: '退款率',key: 'refundRatio'},
				],
				timeContents: [],
				userHeaders: [
							{label: '账号',key: 'nickName', width: 200}, 
							{label: '销售总额',key: 'totalPayAmount'}, 
							{label: '佣金总额',key: 'estimatedCommission'}, 
							{label: '有效佣金',key: 'validEstimatedCommission'}, 
							{label: '订单总数',key: 'orderCount'},
							{label: '有效订单数',key: 'validOrderCount'},
							{label: '退款率',key: 'refundRatio'},
				],
				userContents: [],
				sortCol: [{key: 'time',  isNumber: true},// 该列数据是不是数字或者日期，日期例子：(2020-09-04 08:00) (2020/06/04) (08:00:06) 
							{key: 'totalPayAmount',isNumber: true}, 
							{key: 'estimatedCommission',isNumber: true}, 
							{key: 'validEstimatedCommission',isNumber: true}, 
							{key: 'orderCount',isNumber: true}, 
							{key: 'validOrderCount',isNumber: true}, 
							{key: 'refundRatio',isNumber: true}, 
							{key: 'refundEstimatedCommission',isNumber: true}, 
							{key: 'validPayAmount',isNumber: true}, 
							{key: 'refundPayAmount',isNumber: true}, 
							{key: 'refundOrderCount',isNumber: true}, 
				],
				currentTargetType: '',
				orderDetailInfo: {},
			}
		},
		onLoad(options) {
			if(options.goodsId) {
				this.goodsId = options.goodsId;
				this.orderId = options.orderId;
				let chooseType = options.chooseType;
				for (var index=0;index<this.dayTypeList.length;index++) {
					if (this.dayTypeList[index].value == chooseType) {
						this.currentDayTypeInfo = this.dayTypeList[index];
						break;
					} 
				}
			}
			if(options.accountInfo) {
				this.accountInfo = JSON.parse(options.accountInfo);
			}
			this.getOrderDetail();
			this.getOrderDetailStat();
		},
		methods: {
			onConfirm(res, type){
				console.log(res)
				if (type == "dateType") {
					this.currentDateTypeInfo.label = res.result;
					this.currentDateTypeInfo.value = res.value;
					this.getOrderDetailStat();
				} else if (type == "dayType") {
					this.currentDayTypeInfo.label = res.result;
					this.currentDayTypeInfo.value = res.value;
					this.getOrderDetailStat();
				} else if (type == "timeType") {
					this.currentTimeTypeInfo.label = res.result;
					this.currentTimeTypeInfo.value = res.value;
					this.getOrderDetailStat();
				} else if (type == "chatType") {
					this.chatTargetType.label = res.result;
					this.chatTargetType.key = res.value;
					this.showCurrentPmtView();
				}
			},
			showSelectorDialog(type) {
				if (type == "dayType") {
					this.dayTypeList = this.dayTypeListGroup;
				}
				this.$refs[type].show();
			},
			showTargetDialog(type) {
				this.currentTargetType = type;
				if (type == "timeType") {
					for (var index=0;index<this.allTargetTypeList.length;index++) {
						if (this.timeHeaders.some(item => item.key === this.allTargetTypeList[index].key)) {
							this.allTargetTypeList[index].isCheck = true;
						} else {
							this.allTargetTypeList[index].isCheck = false;
						}
					}
				} else if (type == "userType") {
					for (var index=0;index<this.allTargetTypeList.length;index++) {
						if (this.userHeaders.some(item => item.key === this.allTargetTypeList[index].key)) {
							this.allTargetTypeList[index].isCheck = true;
						} else {
							this.allTargetTypeList[index].isCheck = false;
						}
					}
				} 
				this.$nextTick(() => {
				    this.$refs['showTargetPop'].open();
				})
			},
			onConfirmPopClick() {
				if (this.currentTargetType == "timeType") {
					this.timeHeaders = [{label: '时间',key: 'time', width: 200}];
					for (var index=0;index<this.allTargetTypeList.length;index++) {
						if (this.allTargetTypeList[index].isCheck) {
							this.timeHeaders.push(this.allTargetTypeList[index]);
						}
					}
				} else if (this.currentTargetType == "userType") {
					this.userHeaders = [{label: '账号',key: 'nickName', width: 200}];
					for (var index=0;index<this.allTargetTypeList.length;index++) {
						if (this.allTargetTypeList[index].isCheck) {
							this.userHeaders.push(this.allTargetTypeList[index]);
						}
					}
				} 
				this.onCancelPopClick();
			},
			onCancelPopClick() {
				this.$nextTick(() => {
				    this.$refs['showTargetPop'].close();
				})
			},
			onItemPopClick(index) {
				if (this.allTargetTypeList[index].isCheck) {
					this.allTargetTypeList[index].isCheck = false;
				} else {
					this.allTargetTypeList[index].isCheck = true;
				}
			},
			chooseAccount() {
				//监听事件
				let that = this;
				this.$eventHub.$on('chooseAccount', function(item) {
					that.accountInfo.nickName = item.nickName;
					that.accountInfo.displayId = item.displayId;
					that.getOrderDetailStat();
				       //清除监听，不清除会消耗资源
				    that.$eventHub.$off('chooseAccount');
				});
				uni.navigateTo({
					url: '/subpages/pages/chooseAccount?displayId='+this.accountInfo.displayId
				})
			},
			getOrderDetailStat() {
				let that = this;
				var params = {};
				if (that.currentDayTypeInfo.value != "5" && that.currentDayTypeInfo.value != '4') {
					params = {
						pid: that.goodsId,
						orderId: that.orderId,
						type: that.currentDayTypeInfo.value,
						dateType: that.currentDateTypeInfo.value,
						displayId: that.accountInfo.displayId
					};
				} else {
					params = {
						pid: that.goodsId,
						orderId: that.orderId,
						type: that.currentDayTypeInfo.value,
						dateType: that.currentDateTypeInfo.value,
						timeType: that.currentTimeTypeInfo.value,
						displayId: that.accountInfo.displayId
					};
				}
				this.$Request.postJson(configUrls.getOrderDetailStat, params
				).then(res => {
					if (res.code == "10000") {
						// console.log("产品统计：", JSON.stringify(res.data.result));
						const respData = res.data.result;
						if (respData.summaryStatVo) {
							that.statInfo = respData.summaryStatVo;
						}
						if (respData.timeStatVo) {
							that.timeContents = respData.timeStatVo;
							that.showCurrentPmtView();
						}
						if (respData.userStatVo) {
							that.userContents = respData.userStatVo;
						}
					} 
				}); 
			},
			getOrderDetail() {
				let that = this;
				this.$Request.postJson(configUrls.getOrderDetail, {
					pid: that.goodsId,
					orderId: that.orderId, 
				}).then(res => {
					if (res.code == "10000") {
						that.orderDetailInfo = res.data.result; 
					} 
				}); 
			},
			showCurrentPmtView() {
				let data = this.timeContents;
				this.xDataList = [];
				this.yDataList = [];
				let type = this.chatTargetType.key;
				for (let position=0;position<data.length;position++) {
					this.xDataList.push(data[position].time);
					this.yDataList.push(data[position][type]);
				}
				this.$refs.lineChartRef.loadLineData(this.xDataList, this.yDataList);
			},
			bindAccountClick() {
				uni.navigateTo({
					url: '/pages/mine/empower'
				});
			},
		},
	}
</script>

<style>
	@import url("../../css/main/productDetail.css");
</style>